<template>
  <!-- 消防车详情弹框 -->
  <div :class="
            'patrol-navigation-wrap-car dialog-wrap lg ' +
                ($Ctl.isCs(true) ? 'gradation-bg' : 'bg-lg')
        ">
    <div class="dialog-title">车辆详情</div>
    <div class="show-content">
      <div class="program-wrap">
        <!-- 图 -->
        <div class="device-img-wrap">
          <img v-if="baseInfo.name" class="device-img" :src="
                            baseInfo.pictureUrl
                                ? baseInfo.pictureUrl.split(',')[0]
                                : GLOBAL.defaultImg
                        " />
        </div>
        <!-- 文案 -->
        <div class="info-content">
          <p class="content-name">{{ baseInfo.name }}</p>
          <p class="content-num">{{ baseInfo.carNumber }}</p>
          <p class="content-desc">{{ baseInfo.carDescribe }}</p>
        </div>
      </div>
    </div>
    <div class="card-mid">
      <div class="car-logo"></div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="当前位置" name="0"></el-tab-pane>
        <el-tab-pane label="1小时" name="1"></el-tab-pane>
        <el-tab-pane label="3小时" name="3"></el-tab-pane>
        <el-tab-pane label="8小时" name="8"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="card-bottom">
      <div id="baiduMap_carDetail"></div>
    </div>
  </div>
</template>
<script>
import loadBMap from '@/libs/bdMap/loadBMap.js'
import utils from '@/utils/util'
import { getCarDetail } from '@/api/markInfo3d'
import { getCurrentPosition, getHistoryDao } from '@/api/baiduapi'
import {
  FunDengLu,
  FunBaoChi,
  FunClear,
  FunDwGetOne,
  FunHuiFang,
  FunDwGetZu,
  FunDwGetChe,
} from '@/api/zhdserviceapi'

let map_carDetail = null
let lushu = null
let pointCollectionArr = null
let arrPois = []
let positionLine = null
export default {
  props: {
    parames: {
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      location: {},
      centerLocation: JSON.parse(localStorage.getItem('ilinkBs_mapLocation') || '0'),
      activeName: '0',
      baseInfo: {},
      IconUrl: '',
      p_Wy: '', // 车辆定位key
    }
  },
  created() {
    if(this.$Ctl.isCs(true)){
      document.body.classList.add('in-cs')
    }else{
      document.body.classList.remove('in-cs')
    }
    let that = this
    that.activeName = 0
    that.$Ctl.loading(1, 10000)
    that.getInfo()
  },
  beforeDestroy: function () {
    if (this.p_Wy && this.baseInfo.serverPlat == 2) {
      FunClear({
        p_Wy: this.p_Wy,
      })
    }
  },
  methods: {
    getInfo() {
      let that = this
      getCarDetail({
        id: that.parames.id,
      }).then((res) => {
        if (res.status === 200) {
          that.baseInfo = res.data
          that.IconUrl = that.GLOBAL.mapMarkJsonData[that.baseInfo.markType]['bdIcon']
          that.$nextTick(() => {
            that.initBaiduMap_popup()
          })
        }
        that.$Ctl.loading(0)
      })
    },
    initBaiduMap_popup() {
      let that = this
      loadBMap()
        .then(() => {
          map_carDetail = new BMap.Map('baiduMap_carDetail', {
            /*minZoom : 6,
                        maxZoom : 18,*/
            enableMapClick: false, //关闭底图可点功能
          })
          let point = new BMap.Point(that.centerLocation.lon, that.centerLocation.lat)
          map_carDetail.centerAndZoom(point, that.centerLocation.zoom)
          map_carDetail.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
          map_carDetail.setMapStyleV2({
            styleId: that.GLOBAL.mapStyleArr[1].style
          })
          if (that.baseInfo.serverPlat == 2) {
            FunDengLu({}, (data) => {
              that.p_Wy = data.z3
              FunDwGetZu(
                {
                  p_Wy: that.p_Wy,
                  p_strTj: '',
                  p_iFs: 0,
                },
                (data) => {
                  FunDwGetChe(
                    {
                      p_Wy: that.p_Wy,
                      p_ZuId: '',
                      p_Idx: 0,
                      p_Co: 50,
                    },
                    (data) => {
                      that.getcurrent()
                    }
                  )
                }
              )
            })
          } else {
            that.getcurrent()
          }
        })
        .catch((err) => {
          console.error('地图加载失败')
        })
    },
    handleClick(tab, event) {
      let that = this
      let hourNum = tab.name
      that.removePosition()
      if (that.p_Wy && that.baseInfo.serverPlat == 2) {
        FunBaoChi({
          p_Wy: that.p_Wy,
        })
      }
      if (hourNum == 0) {
        that.getcurrent()
      } else {
        that.getCarHistoryPosition(hourNum)
      }
    },
    getCarHistoryPosition(hourNum) {
      let that = this
      that.$Ctl.loading(1, 10000)
      let now = Math.round(new Date().getTime() / 1000)
      let begin = now - parseInt(hourNum) * 60 * 60
      if (that.baseInfo.serverPlat == 2) {
        FunHuiFang(
          {
            p_Wy: that.p_Wy,
            p_CheId: that.baseInfo.bizId,
            p_Begin: utils.ilinkTimeformat.hoursAgo(parseInt(hourNum), 'yyyy-MM-dd hh:mm:ss'),
            p_End: utils.ilinkTimeformat.format(new Date(), 'yyyy-MM-dd hh:mm:ss'),
          },
          (res) => {
            if (!res || res.m_Data.length == 0) {
              that.$Ctl.message('暂无行车轨迹！', 'warning')
              that.$Ctl.loading(0)
              return
            }
            arrPois = []
            for (let i = 0; i < res.m_Data.length; i++) {
              let tempPoint = new BMap.Point(res.m_Data[i].bJd, res.m_Data[i].bWd)
              arrPois.push(tempPoint)
            }
            that.initTravel()
            that.$Ctl.loading(0)
          },
          (err) => {
            that.$Ctl.loading(0)
          }
        )
      } else {
        getHistoryDao(
          that.baseInfo.bizId,
          begin,
          now,
          (res) => {
            if (!res.points || res.points.length == 0) {
              that.$Ctl.message('暂无行车轨迹！', 'warning')
              that.$Ctl.loading(0)
              return
            }
            arrPois = []
            for (let i = 0; i < res.points.length; i++) {
              let tempPoint = new BMap.Point(res.points[i].longitude, res.points[i].latitude)
              arrPois.push(tempPoint)
            }
            that.initTravel()
            that.$Ctl.loading(0)
          },
          (err) => {
            that.$Ctl.loading(0)
          }
        )
      }
    },
    //移除轨迹点
    removePosition() {
      if (positionLine) {
        map_carDetail.removeOverlay(positionLine)
      }
      if (lushu) {
        lushu.stop()
        lushu.hideInfoWindow()
      }
      if (pointCollectionArr) {
        map_carDetail.removeOverlay(pointCollectionArr)
        pointCollectionArr = null
      }
      map_carDetail.clearOverlays()
    },
    getcurrent() {
      let that = this
      that.$Ctl.loading(1, 10000)
      if (that.baseInfo.serverPlat == 2) {
        FunDwGetOne(
          {
            p_Wy: that.p_Wy,
            p_CheId: that.baseInfo.bizId,
          },
          (res) => {
            if (res && res.bJd && res.bWd) {
              that.initPosition({
                longitude: res.bJd,
                latitude: res.bWd,
              })
            } else {
              that.$Ctl.message('未获取到【' + that.baseInfo.name + '】位置数据！')
            }
            that.$Ctl.loading(0)
          },
          (err) => {
            that.$Ctl.loading(0)
          }
        )
      } else {
        getCurrentPosition(
          that.baseInfo.bizId,
          (res) => {
            if (res.status === 0) {
              let latest_location = res.latest_point
              if (latest_location && latest_location.longitude && latest_location.latitude) {
                that.initPosition(latest_location)
              }
            } else {
              that.$Ctl.message('未获取到【' + that.baseInfo.name + '】位置数据！')
            }
            that.$Ctl.loading(0)
          },
          (err) => {
            that.$Ctl.loading(0)
          }
        )
      }
    },
    initPosition(res) {
      let that = this
      let myIcon = new BMap.Icon(that.IconUrl, new BMap.Size(50, 50))
      let callPoint = new BMap.Point(res.longitude, res.latitude)
      let carMarker = new BMap.Marker(callPoint, { icon: myIcon }) // 创建标注*/
      map_carDetail.addOverlay(carMarker)
      map_carDetail.centerAndZoom(callPoint, 16)
      carMarker.setAnimation ? carMarker.setAnimation(BMAP_ANIMATION_DROP) : ''
    },
    initTravel() {
      let that = this
      map_carDetail.setViewport(arrPois)
      positionLine = new BMap.Polyline(arrPois, {
        strokeColor: '#30cd00',
        strokeWeight: 5,
        strokeOpacity: 0.5,
      })
      map_carDetail.addOverlay(positionLine) // 画线
      // 初始化PointCollection
      pointCollectionArr = new BMap.PointCollection(arrPois, {
        size: BMAP_POINT_SIZE_SMALL,
        shape: BMAP_POINT_SHAPE_CIRCLE,
        color: '#1cbe10',
      })
      map_carDetail.addOverlay(pointCollectionArr) // 添加Overlay
      BMapLib.LuShu.prototype._addMarker = function (callback) {
        if (this._marker) {
          this.stop()
          this._map.removeOverlay(this._marker)
          clearTimeout(this._timeoutFlag)
        }
        //移除之前的overlay
        this._overlay && this._map.removeOverlay(this._overlay)
        var marker = new BMap.Marker(this._path[0])
        this._opts.icon && marker.setIcon(this._opts.icon)
        this._map.addOverlay(marker)
        marker.setAnimation(BMAP_ANIMATION_DROP)
        this._marker = marker
      }
      lushu = new BMapLib.LuShu(map_carDetail, arrPois, {
        defaultContent: '', //"从天安门到百度大厦"
        autoView: true, //是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
        icon: new BMap.Icon(that.IconUrl, new BMap.Size(50, 50), {
          anchor: new BMap.Size(20, 13),
        }),
        speed: 4500,
        enableRotation: false, //是否设置marker随着道路的走向进行旋转
        landmarkPois: [
          //{lng:116.306954,lat:40.05718,html:'加油站',pauseTime:2}
        ],
      })
      lushu.start()
    },
  },
}
</script>

<style lang="scss">
#baiduMap_carDetail {
  width: 100%;
  height: 100%;
  background-color: rgba(6, 23, 35, 1);
}
.patrol-navigation-wrap-car {
  .show-content {
    margin: 35px auto;
    width: 520px;
    height: 180px;
    background: url(../../../assets/images/dialogCards/content-bg.png)
            center center no-repeat;
    background-size: cover;
    .program-wrap {
      display: flex;
      height: 100%;
      align-items: center;
      .info-content {
        width: 278px;
        height: 100%;
        overflow: auto;
        font-size: 20px;
        color: #fff;
        text-align: left;
        .content-name {
          font-size: 25px;
          line-height: 60px;
        }
        .content-num {
          line-height: 30px;
          color: rgba(163, 190, 221, 1);
        }
        .content-desc {
          color: rgba(126, 176, 255, 1);
        }
      }
      .device-img-wrap {
        width: 242px;
        .device-img {
          margin: 0 auto;
          display: block;
          width: 150px;
          height: 125px;
          object-fit: contain;
        }
      }
    }
  }
  .card-mid {
    height: 60px;
    width: 100%;
    .car-logo {
      float: left;
      width: 140px;
      height: 40px;
      background: url(../../../assets/images/dialogCards/logo-car.png)
                center center no-repeat;
    }
    .el-tabs {
      float: right;
      .el-tabs__item {
        padding: 0 10px;
        font-size: 18px;
        color: rgba(163, 190, 221, 1);
        &.is-active {
          color: rgba(96, 167, 255, 1);
        }
      }
      .el-tabs__nav-wrap {
        &::after {
          background-color: transparent;
        }
      }
    }
  }
  .card-bottom {
    height: calc(100% - 340px);
    width: 100%;
  }
}
.in-cs{
  .el-message{
    top:70px!important;
  }
}
</style>
